@import url(../pubiic/common.css);
@import url(../pubiic/flex_layout.css);
@import url(../../font/iconfont.css);
@import url(../pubiic/theme-switch.css);
@import url(../pubiic/style.css);
@import url(cart-media.css);

/* main部分Start */
.cart-panel {
    flex-wrap: wrap;
    margin: 3rem auto;
}

/* 购物车标题 */
.cart-panel .cart-title {
    position: relative;
    margin-bottom: 2rem;
    font-size: 2.2rem;
    font-weight: 700;
}

.cart-panel .cart-title-en {
    font-weight: 900;
    font-size: 3.3rem;
}

.cart-content {
    flex-wrap: nowrap;
}

/* 购物车 */
.cart-box {
    width: 66.6667%;
    padding: 0 .5rem;
}

/* 购物车没有商品时的内容 */
.noitem-cart {
    text-align: center;
    font-size: 2rem;
    opacity: .6;
}

/* 商品操作 */
.cart-introduce {
    display: flex;
    align-items: center;
    padding: 24px 0px;
    font-size: 1rem;
    box-shadow: rgb(229 229 229) 0px -1px 0px 0px inset
}


.cart-introduce .checkAll-box {
    display: flex;
    align-items: center;
    padding: 0 0.8rem;
    cursor: pointer;
}

.cart-introduce .checkAll-box .checkAll {
    width: 1rem;
    height: 1rem;

}

.cart-introduce .clearAll-box {
    margin-left: .8rem;
}

.cart-introduce .clearAll-box:hover a {
    color: #ff3300;
}

/* 商品项目 */
.cart-items {
    position: relative;
}

.cart-items .cart-item {
    display: flex;
    flex-direction: column;
    padding: 24px 0px;
    width: 100%;
    box-shadow: rgb(229 229 229) 0px -1px 0px 0px inset
}

/* 为选中的商品项目设置背景颜色 */
.cart-checkBg {
    background-color: rgba(155, 155, 155, .18);
}

/* 电影信息 */
.cart-movie-info {
    display: flex;
}

/* 选择框 */
.cart-movie-info .check-box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 .3rem;
}

/* 电影海报 */
.cart-movie-info .cart-movie-poster {
    margin-right: 1rem;
}

.cart-movie-info .cart-movie-poster img {
    max-width: 100%;
    width: 120px;
}

/* 电影售卖信息 */
.cart-movie-sale {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    flex-grow: 1;
}

/* 电影售卖信息————左 */
.cart-movie-sale .movie-sale-left {
    display: flex;
    flex-direction: column;
    color: #888888;
}

.cart-movie-sale .movie-sale-left div {
    padding: 5px 0;
}

/* 电影售卖信息------标题 */
.movie-sale-left .sale-title {
    width: 100%;
    padding-bottom: .5rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--font-color);
    cursor: pointer;
}

/* 电影售卖信息------放映时间 */
.movie-sale-left .screen-time {
    color: #ff3300;
}

/* 电影售卖信息------数量 */
.movie-sale-left .info-num {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}

.info-num .num-form {
    /* overflow: hidden; */
    padding: 0 !important;
    border: 1.5px solid #888888;
    border-radius: 8px;
}

.info-num .num-form .decrement,
.info-num .num-form .increment {
    padding: .1rem;
    width: 16px;
    color: var(--font-color);
    font-size: 1.2rem;
}

.info-num .num-form .decrement:hover,
.info-num .num-form .increment:hover {
    color: #ff3300;
}

.info-num .num-form .numtxt {
    max-width: 30px;
    height: 100%;
    padding: .2rem;
    text-align: center;
    border: none;
    border-left: 1px solid var(--font-color);
    border-right: 1px solid var(--font-color);
    background-color: transparent;
    outline: none;
    color: var(--font-color);
}

/* 电影售卖信息————右 */
.cart-movie-sale .movie-sale-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: .5rem;
}

.operate {
    display: flex;
    justify-content: flex-end;
}

.operate button {
    font-size: 1.4rem;
    color: var(--font-color);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.operate button:hover {
    color: #ff3300;
}

/* 影院信息 */
.cart-cinema-info .cinema {
    display: flex;
    flex-direction: column;
    padding: .8rem 0 0 2rem;
}

.cart-cinema-info .cinema a {
    padding: 8px 0;
}

.cart-cinema-info .cinema a:hover {
    color: #ff3300;
}

.cart-cinema-info .cinema span {
    padding: 8px 0;
}

.cart-cinema-info .cinema span em {
    padding-bottom: .2rem;
    border-bottom: .5px solid var(--font-color);
}

/* 摘要 */
.summary-box {
    margin-bottom: 1rem;
    padding: 0 8px;
    flex-grow: 1;
}

aside {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0px;
    margin-top: 20px;
}

.aside-title {
    display: flex;
    margin-bottom: 16px;
}

.aside-title h4 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
}

/* 兑换码 */
.summary-discount-code summary .discount-down {
    font-style: .6rem;
    transition: all .3s;
    cursor: pointer;
}

/* 兑换码输入框 */
.summary-discount-code .code-inputBox {
    display: none;
}

.summary-discount-code .code-inputBox .code-item {
    display: flex;
    align-items: center;
    margin: .8rem 0;
}

.summary-discount-code .code-inputBox .code-item .inputBox {
    position: relative;
    overflow: hidden;
    padding: 0;
    max-width: calc(4.16667 * 16%);
    min-height: 1px;
    font-size: 1rem;
    line-height: 1.7;
}

.summary-discount-code .code-inputBox .code-item .inputBox .code {
    min-height: 24px;
    width: 80%;
    height: inherit;
    z-index: 1;
    padding: 8px 12px;
    border: 1px solid var(--font-color);
    border-radius: 8px;
    font-size: 14px;
    line-height: 2px;
    outline: none;
}

.summary-discount-code .code-inputBox .code-item .inputBox .code:focus {
    border: 1px solid #ff3300;
}

.summary-discount-code .code-inputBox .code-item .exchange {
    padding: 8px 18px;
    margin-left: 8px;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #ff711f 0%, #e50914 100%);
    border: none;
    border-radius: 12px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}

/* 兑换码，小计，折扣 */
.summary-box .summary-discount-code,
.summary-box .summary-discount-code summary,
.summary-box .summary-subtotal,
.summary-box .summary-discount {
    margin-bottom: 8px;
}

/* 小计 */
.summary-subtotal {
    display: flex;
    justify-content: space-between;
}

/* 折扣 */
.summary-discount {
    display: flex;
    justify-content: space-between;
}

/* 总金额 */
.summary-price {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin: 12px 0px;
    text-align: right;
    padding: 0px;
}

/* 付款按钮 */
.payment {
    display: none;
}

.payment .btn-payment {
    text-align: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 18px 24px;
    width: 60%;
    border: none;
    background: linear-gradient(to right, #ff711f 0%, #e50914 100%);
    border-radius: 30px;
    color: #fff;
    font: 600 1.2rem/1.5 '微软雅黑';
    cursor: pointer;
    transition: all 0.2s ease 0s;
}

/* 页面宽度960px时显示------底部支付按钮 */
.cart-fixed-btn {
    display: none;
    background: var(--back-color);
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 200;
    padding: 16px 12px;
    box-shadow: rgb(229 229 229) 0px 1px 0px 0px inset;
}

.cart-fixed-btn button {
    display: block;
    width: 100%;
    padding: 18px 24px;
    border: none;
    outline: none;
    border-radius: 30px;
    background: linear-gradient(to right, #ff711f 0%, #e50914 100%);
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease 0s;
}

/* main部分End */